<template>
	<view class="container">
		<view class="">
			<c-navBar title="上报记录" isPerch :leftFn='true' @leftFn="goBack"></c-navBar>
			<c-tabs :tab="tab" :dataList="tabList" @change="changeTab"></c-tabs>
		</view>
		<c-scroll-list :apiParams="apiParams" :option="{auto:false}" @load="load" :api="api" ref="list">
			<view v-for="(item,index) in machineTaskList" :key="index" class="content">
				<view class="item" @click="itemClick(item)">
					<view class="top">
						<text class="title">{{ $fn.formatTime(item.createTime) }}</text>
						<text v-if="item.useStatus == '1' && item.startStatus == '3'" class="status"
							:style="{ color: color(item.useStatus) }">上报待审核</text>
						<text v-if="item.useStatus == '2'" class="status"
							:style="{ color: color(item.useStatus) }">待开始</text>
						<text v-if="item.useStatus == '3'" class="status"
							:style="{ color: color(item.useStatus) }">进行中</text>
						<text v-if="item.useStatus == '4' && item.endStatus == '3'" class="status"
							:style="{ color: color(item.useStatus) }">提交待审核</text>
						<text v-if="item.useStatus == '5'" class="status"
							:style="{ color: color(item.useStatus) }">已完成</text>
						<text v-if="item.useStatus == '6'" class="status"
							:style="{ color: color(item.useStatus) }">已取消</text>
						<text
							v-if="item.useStatus == '1' && item.startStatus == '1' || item.useStatus == '4' && item.endStatus == '1'"
							class="status" :style="{ color: color('7') }">已驳回</text>
					</view>
					<view class="title2">{{ item.project.projectName }}</view>
					<view class="text">机器名称：{{ item.machine.machineName }}</view>
					<view class="text">机器编号：{{ item.machine.machineNumber }}</view>
					<view class="text">机器型号：{{ item.machine.machineType }}</view>
				</view>
			</view>
		</c-scroll-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: this.$titleHeight,
				api: this.$api.machineTaskPage,
				apiParams: {
					pageNum: 1,
					pageSize: 10,
					useStatus: '',
					startStatus: '',
					endStatus: '',
				}, // 请求参数
				machineTaskList: [],
				tab: {
					value: '全部',
					key: ''
				},
				tabList: [{
						value: '全部',
						key: ''
					},
					{
						value: '上报待审核',
						key: 1
					},
					{
						value: '上报驳回',
						key: 7
					},
					{
						value: '待开始',
						key: 2
					},
					{
						value: '进行中',
						key: 3
					},
					{
						value: '提交待审核',
						key: 4
					},
					{
						value: '提交驳回',
						key: 8
					},
					{
						value: '已完成',
						key: 5
					},
					{
						value: '已取消',
						key: 6
					},
				],
			};
		},
		computed: {
			color() {
				return (key) => {
					let color = '';
					switch (key) {
						case '1': // 上报待审核
							color = '#FF8A00';
							break;
						case '2': // 待开始
							color = '#00693A';
							break;
						case '3': // 进行中
							color = '#4280DD';
							break;
						case '4': // 提交待审核
							color = '#3F41CF';
							break;
						case '5': // 已完成
							color = '#1A1A1A';
							break;
						case '6': // 已完成
							color = '#999999';
							break;
						case '7': // 已驳回
							color = '#ff0000';
							break;
					}
					return color;
				};
			},
		},
		onShow() {
			setTimeout(() => {
				this.$refs.list.initList();
			})
		},
		methods: {
			load(res) {
				console.log(res, '机器使用上报');
				if (res != null) {
					this.machineTaskList = res.list;
				} else {
					this.machineTaskList = [];
				}
			},
			// tab点击
			changeTab(e) {
				this.tab = e;
				if (this.tab.key == 7) {
					this.apiParams.useStatus = '1';
					this.apiParams.startStatus = '1'
				} else if (this.tab.key == 8) {
					this.apiParams.useStatus = '4';
					this.apiParams.endStatus = '1'
				} else if (this.tab.key == 1) {
					this.apiParams.useStatus = '1';
					this.apiParams.startStatus = '3'
				} else if (this.tab.key == 4) {
					this.apiParams.useStatus = '4';
					this.apiParams.endStatus = '3'
				} else {
					this.apiParams.useStatus = this.tab.key;
					this.apiParams.startStatus = ''
					this.apiParams.endStatus = ''
				}
				console.log(this.tab.key, 'this.tab.key');
				this.list = [];
				this.$refs.list.refresh();
			},
			itemClick(item) {
				console.log(item);
				uni.navigateTo({
					url: `/pages/home/reportDetails?id=` + item.id,
				})
			},
			goBack() {
				uni.reLaunch({
					url: '/pages/tabbar/home'
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.container {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background: #F7F7F7;

		.content {
			flex: 1;
			padding: 24rpx 24rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;

			.item {
				width: 702rpx;
				height: 320rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				.top {
					padding: 20rpx 24rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1rpx solid #E3E4E5;

					.title {
						font-weight: 500;
						font-size: 28rpx;
						color: #4D4D4D;
					}

					.status {
						font-weight: 500;
						font-size: 24rpx;
						color: #FF8A00;
					}
				}

				.title2 {
					margin-top: 28rpx;
					padding: 0rpx 24rpx;

					@include ellipsis(1);
					font-weight: 500;
					font-size: 32rpx;
					color: #262626;
					margin-bottom: 8rpx;
				}

				.text {
					margin-top: 12rpx;
					padding: 0rpx 24rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
			}
		}
	}
</style>